<template>
  <div class="store">
    <van-nav-bar fixed placeholder :title="title" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="store_box">
      <div class="store_box_screen">
        <!-- <div class="store_box_screen_item" @click="vicinity">
          <div class="store_box_screen_item_text">附近门店</div>
        </div> -->
        <div class="store_box_screen_item" @click="screenStore">
          <div class="store_box_screen_item_text">{{ result }}</div>
          <i class="iconfont icon-sanjiaoxia store_box_screen_item_icon"></i>
        </div>
      </div>

      <div class="store_box_list">
        <storeList :provinceId="provinceId" :cityId="cityId" :areaId="areaId" />
      </div>
    </div>

    <!-- 地区选择 -->
    <van-popup v-model:show="showArea" position="bottom">
      <van-cascader v-model="code" title="请选择所在地区" :options="columns" active-color="#ff5000" :field-names="fieldNames" @close="showArea = false" @finish="finish" />
    </van-popup>

  </div>
</template>

<script setup>
import storeList from '../../../components/storeList.vue';
import { getAreaTreeAPI } from '@/api/common.js'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const fieldNames = {
  text: 'label',
  value: 'value',
  children: 'children'
}

const result = ref('全部门店')
const showArea = ref(false)

const router = useRouter()
const title = ref(router.currentRoute.value.query.type ? router.currentRoute.value.query.type : '门店服务')
const provinceId = ref('')
const cityId = ref('')
const areaId = ref('')
const columns = ref([])

const onClickLeft = () => {
  router.back()
}

// 获取地区列表
const getAreaTree = async () => {
  await getAreaTreeAPI().then(res => {
    columns.value = res.data
  }).catch(err => {
    console.log(err)
  })
}
getAreaTree()


// const vicinity = () => {
//   console.log('附近门店')
// }

const screenStore = () => {
  showArea.value = true
}

const finish = ({ selectedOptions }) => {
  showArea.value = false
  // console.log('finish', selectedOptions)

  if (selectedOptions[0]?.label === '不限' || selectedOptions[0]?.label === undefined) {
    result.value = '全部门店'
    provinceId.value = ''
    cityId.value = ''
    areaId.value = ''
  } else if (selectedOptions[1]?.label === '不限' || selectedOptions[1]?.label === undefined) {
    result.value = selectedOptions[0]?.label
    provinceId.value = selectedOptions[0].value
    cityId.value = ''
    areaId.value = ''
  } else if (selectedOptions[2]?.label === '不限' || selectedOptions[2]?.label === undefined) {
    result.value = selectedOptions[1]?.label
    provinceId.value = selectedOptions[0].value
    cityId.value = selectedOptions[1].value
    areaId.value = ''
  } else {
    result.value = selectedOptions[2]?.label
    provinceId.value = selectedOptions[0].value
    cityId.value = selectedOptions[1].value
    areaId.value = selectedOptions[2].value
  }
}

</script>

<style lang="scss" scoped>
:deep(.van-nav-bar--fixed) {
  z-index: 2;
}

.store {
  &_box {
    padding: 0 .2667rem .4rem;
    background-color: #fff;

    &_screen {
      display: flex;
      justify-content: center;
      padding: .4rem 0;
      background-color: #fff;
      border-bottom: 1px solid #f8f8f8;

      &_item {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        &_text {
          font-size: .4rem;
          margin-right: .1067rem;
        }

        &_icon {
          font-size: .4rem;
          color: #999;
        }
      }
    }

    &_list {
      padding: .4rem 0;
      background-color: #fff;
    }
  }
}
</style>